<template>
	<view>
		<!-- 搜索框 -->
		<view class="search">
			<u-search placeholder="请输入要搜索的内容" :show-action="false" :showAction="false" :clearabled="true"
				bg-color="#fff" :disabled="true" @click="GoPopup">
			</u-search>
		</view>
		<!-- 分类内容 -->
		<view class="cateGoryMaxBox">
			<!-- 左侧边栏 -->
			<view class="LeftSidebar">
				<view class="LeftSidebarItem" :class="{active:currentId==item.id?true:false}"
					v-for="item in categoryList" :key="item.id" @click="goClassData(item.id)">
					{{item.name}}
					<view class="redHx" v-show="currentId==item.id?true:false"></view>
				</view>
			</view>
			<!-- 右边内容 -->
			<view class="rightCentenBox">
				<view style="margin: auto;width: 100%;">
					<image :src="currentCategory.banner_url" mode="scaleToFill" class="iamgeSty"></image>
				</view>
				<view class="cateGoryTitle">
					<text class="titleHx"></text>
					<view class="cateGoryTitleCent">
						{{currentCategory.name}}
					</view>
				</view>
				<!-- 布局 -->
				<u-grid :border="false">
					<u-grid-item v-for="(item) in currentCategory.subCategoryList" :key="item.id">
						<image :src="item.wap_banner_url" mode="scaleToFill" class="gridImgSty"></image>
						<text class="grid-text">{{item.name}}</text>
					</u-grid-item>
				</u-grid>
				<u-toast ref="uToast" />
			</view>
		</view>
		<tobBar :current="2"></tobBar>
	</view>
</template>

<script>
	import request from "../request/request.js"
	import {
		CategoryApi,
		CategoryGoodsApi,
		CatalogAllDataApi
	} from "../request/api.js"
	export default {
		data() {
			return {
				categoryList: [],
				currentCategory: {},
				currentId: ''
			}
		},

		onLoad() {
			request({
				url: CatalogAllDataApi,
				successCb: res => {
					this.categoryList = res.categoryList
					this.currentCategory = res.currentCategory
					this.currentId = res.currentCategory.id
					console.log(res);
				}
			})
		},

		methods: {
			GoPopup() {
				uni.navigateTo({
					url: "../popup/popup"
				})
			},
			goClassData(id) {
				request({
					url: CatalogAllDataApi,
					data: {
						id,
					},
					successCb: res => {
						this.categoryList = res.categoryList
						this.currentCategory = res.currentCategory
						this.currentId = res.currentCategory.id
						console.log(res);
					}

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		padding: 20rpx 24rpx;
		margin-bottom: 20rpx;
	}

	.cateGoryMaxBox {
		width: 100%;
		display: flex;

		.LeftSidebar {
			width: 20vw;
			background-color: #f7f8fa;
			display: flex;
			flex-wrap: wrap;

			.LeftSidebarItem {
				position: relative;
				width: 100%;
				height: 120rpx;
				padding: 40rpx 24rpx;
				box-sizing: border-box;
				text-align: center;

				.redHx {
					position: absolute;
					top: 50%;
					left: 0;
					width: 4px;
					height: 16px;
					background-color: #ee0a24;
					transform: translateY(-50%);
				}
			}

			.active {
				background-color: #fff;
			}
		}

		.rightCentenBox {
			flex: 1;

			.iamgeSty {
				width: 76vw;
				margin: 0 14rpx;
				border-radius: 5px;
				box-shadow: 0 0 6px #000;
				filter: brightness(0.5);
				height: 140px;
			}

			.cateGoryTitle {
				width: 100%;
				height: 50px;
				position: relative;
				background: #fff;
				font-size: 16px;

				.titleHx {
					width: 50%;
					height: 2px;
					background-color: #ccc;
					position: absolute;
					margin: auto;
					left: 0;
					top: 0;
					bottom: 0;
					right: 0;
				}

				.cateGoryTitleCent {
					width: 30%;
					height: 40px;
					background-color: #fff;
					position: absolute;
					margin: auto;
					left: 0;
					top: 0;
					bottom: 0;
					right: 0;
					line-height: 40px;
					text-align: center;
					color: #000;
				}


			}


			.gridImgSty {
				width: 8vw;
				height: 8vw;
			}
		}


	}


	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
</style>
